<template>
  <div class="bgc_white" id="register" :style="'min-height: '+ height">
    <div class="register" >
      <el-form :model="form" :rules="rules" ref="form" :validate-on-rule-change="true">
        <p class="title">ACCOUNT REGISTRATION</p>
        <p class="secTitle">{{$t('WARRANTY.WARRANTYLOGIN')}}<span @click="goToLogIn">{{$t('DEFAULT.SIGNIN')}} ></span></p>
        <p class="formTitle">{{$t('DEFAULT.BTCOUNTRY')}}</p> 
        <el-form-item  prop="country">
          <el-select v-model="form.country"  placeholder=""> 
            <el-option v-for="item in countryList" :key="item.name_en" :value="item.name_en" :label="item.name_en"></el-option>
          </el-select>
        </el-form-item>
        <p class="formTitle">{{$t('DEFAULT.BTUSERNAME')}}</p>
        <el-form-item  prop="nickname">
          <el-input  v-model="form.nickname" name="nickname" ></el-input>
        </el-form-item>
        <p class="formTitle"> {{$t('DEFAULT.SIGNEMAI')}} </p>
        <el-form-item  prop="email">
          <el-input  v-model="form.email" name="email" @change="(value) => checkEmailExist(value)" @blur="blurEmail($event)" ></el-input>
        </el-form-item> 
        <p class="formTitle">{{$t('DEFAULT.PASSWORD')}} </p>
        <el-form-item  prop="password">
          <el-input  v-model="form.password"  name="password" :type="showPsw" >
            <i @click="isPswShow" slot="suffix" :class="showPsw == 'password' ? 'icon-nondisplay_normal iconfont': 'iconfont icon-display_normal'  "></i>

          </el-input>
        </el-form-item>
        <p class="formTitle">{{$t('DEFAULT.CONFIRMPSW')}} </p>
        <el-form-item  prop="confirmPwd">
          <el-input  v-model="form.confirmPwd"  name="confirmPwd" :type="showConfirmPsw">
            <i @click="isConfirmPswShow" slot="suffix" :class="showConfirmPsw == 'password' ? 'icon-nondisplay_normal iconfont': 'iconfont icon-display_normal'  "></i>
          </el-input>
        </el-form-item>
        <el-button @click="submitForm()"  :loading="isRequest" :class="{'isFull': isFull}">{{$t('DEFAULT.SIGNUP')}}</el-button>
      </el-form>
    </div>
     <el-dialog :close-on-click-modal="false"   :visible.sync="isInfoShow" class="warranty_dialog">
        <div class="warranty_dialog_content"  style="text-align:center">
          <p>{{$t('BETATESTER.ACCOUNTLOGIN')}}</p>
        </div>
        <span slot="footer" class="dialog-footer">
          <router-link to="/login" ><el-button type="search" >{{$t('DEFAULT.SIGNIN')}}</el-button></router-link>
        </span>
      </el-dialog>
  </div>
 
</template>

<script>
import { mapGetters } from 'vuex'
import { setHeight} from "@/utils/index.js"

import { register } from '@/api/register.js'
import { allEmailGet } from '@/api/contactUs'
export default {
  data () {
    const validatePsw = (rule, value, callback) => {
      if (value === '' || value.length < 6 || value.length > 12) {
        callback(new Error(this.$t('DEFAULT.MSGPWSLEN')));
      } else if (this.form.password && this.form.confirmPwd && this.form.password  !== this.form.confirmPwd) {
        callback(new Error(this.$t('DEFAULT.MSGOSWDIFF')))
      }else {
        callback()
      }
    };
    return {
      height: '',
      isRequest: false,
      showPsw: 'password',
      showConfirmPsw: 'password',
      form:{
        country: '',
        nickname: '',
        email: '',
        password: '',
        confirmPwd: '',
      },
      // isFull: false,
      valid: 1,
      rules: {
        country: [
          { required: true, trigger: 'blur' },
        ],
        email: [
          { required: true,  trigger: 'blur' },
          { type: 'email', message: this.$t('DEFAULT.CORRECTEMAIL'), trigger: 'blur' }
        ],
        nickname: [
          { required: true,  trigger: 'blur' }
        ],
        password: [
          { required: true,trigger: 'blur' , validator: validatePsw},
          { min: 6, max: 12, message: this.$t('DEFAULT.MSGPWSLEN'), trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, trigger: 'blur' , validator: validatePsw},
          { min: 6, max: 12,  trigger: 'blur' }
        ]
      },
      isInfoShow: false
    }
  },
  computed: {
    ...mapGetters(['siteList']),
    countryList () {
      let array = [
        {name_en: "other"}
      ]
      return this.siteList.concat(array)
    },
    isFull () {
      let isFull = false
      let country =  this.form.country.length > 0
      let email = this.form.email.length > 0
      let nickname = this.form.nickname.length > 0
      let password = this.form.password.length > 0
      let confirmPwd = this.form.confirmPwd.length > 0
      if (country && email && nickname && password && confirmPwd){
        this.$refs.form.validate((valid) => {
          console.log(valid, '88888888')
          if(valid){
            isFull =  true
          } 
        })
      } 
      console.log(isFull)
      return isFull
    }

  },
  mounted (){
    this.height = setHeight()
  },
  methods: {
    blurEmail (event) {
    let value = event.target.value
    this.checkEmailExist(value)
    },
    checkEmailExist (value) {
      let params = {
        email: value
      }
      allEmailGet(params).then(res=>{
        if (res.state == 1){
          if(res.data.sign_up == 1){
            this.isInfoShow = true
          }
        }
      })
    },
    isPswShow () {
      if(this.showPsw == 'password'){
        this.showPsw = 'text'
      } else {
        this.showPsw = 'password'
      }
    },
    isConfirmPswShow () {
      if(this.showConfirmPsw == 'password'){
        this.showConfirmPsw = 'text'
      } else {
        this.showConfirmPsw = 'password'
      }
    },
    goToLogIn () {
      this.$router.push('/login')
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if(valid){
          this.logIn()
        } else {
          return false
        }
      })
    },
    logIn(){
      this.isRequest = true
      let params = this.form
      register(params).then(res=>{
        if (res.state == 1){
          if(res.status !== 604 ){
            this.$store.dispatch('ToggleUserInfo', res.data);
            // this.$message.success('注册成功')
            this.$message.success( this.$t('DEFAULT.MSGSIGNUPSUCCESS'))    
            this.$router.push({path: '/'})
          } else {
            this.isInfoShow = true
          }

        }
        this.isRequest = false
      })
    },
  }
}
</script>

<style lang="scss">
@import '@/styles/register/register.scss';
@import '@/styles/common/variables.scss';
.register {
  .el-form{
    top: 0px;
    margin: 64px auto;
    .el-input__suffix{
      right: 15px;
    }
  }
  .iconfont{
    cursor: pointer;
    &:hover{color: #363434;}
  }
  .el-form-item:last-of-type{
    margin-bottom: 32px;
  }
  .secTitle{
    text-align: center;
    margin-bottom: 24px;
    >span{
      margin-left: 40px;
      cursor: pointer;
      color: #0B95FD;
    }
  }
   @include respond('768'){
     .secTitle{
       text-align: left;
       >span{
        margin-left: 0px;
        display: block;
      }
     }
   }

}


</style>